<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 20px auto;
				width: 1000px;
				height: 400px;
				border: 1px solid black;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<form action="">
				<input type="text" name="password" value="">
				<br>
				<br>
				<input type="text" name="confirm_password">
				<br><br>
				<span class="msg"></span>
				<br><br>
				<button type="submit" >提交密码</button>
			</form>
		</div>
		<script type="text/javascript">
			//要求验证两次密码完全一样,并且密码不能少于6位
			let form = document.querySelector("form");
			let span = document.querySelector('.msg');
			//给表单添加一个事件监听-提交事件
			form.addEventListener('submit',function(e){
				let psw = document.querySelector('[name=password]').value;
				let cpsw = document.querySelector('[name=confirm_password]').value;
				if (psw===cpsw && cpsw.length>=6) {
					span.innerHTML = '密码正确';
				} else{
					e.preventDefault(); //阻止默认事件
					span.innerHTML = '两次密码不一致,或者密码长度不够'
				}
				
			})
			
			
		</script>
	</body>
</html>
